<template>
    <div class="see-wapper">
        <div class="see-wapper-top">
            <div class="see-wapper-top-left">
                <Title title="二氧化碳浓度"></Title>
                <div class="see-wapper-top-left-box">
                    <div class="see-wapper-top-left-box-chart">
                        <chart :option="leftTopChart" chose></chart>
                    </div>
                    <div class="see-wapper-top-left-box-list">
                        <div class="see-wapper-top-left-box-list-item" v-for="(v, k) in state.leftTop" :key="k">
                            <div class="see-wapper-top-left-box-list-item-left">{{ v.label }}</div>
                            <div class="see-wapper-top-left-box-list-item-right">
                                <div class="see-wapper-top-left-box-list-item-right-progress"
                                    :style="{ width: v.num + 'vw' }"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="see-wapper-top-center">
                <Title title="监测数据"></Title>
                <div class="see-wapper-top-center-box">
                    <chart :option="centerTop"></chart>
                </div>
            </div>
            <div class="see-wapper-top-right">
                <Title title="空气湿度"></Title>
                <div class="see-wapper-top-right-box">
                    <div class="see-wapper-top-right-box-item" v-for="(v, k) in state.rightTop" :key="k">
                        <div class="see-wapper-top-right-box-item-left">{{ v.label }}</div>
                        <div class="see-wapper-top-right-box-item-right"
                            :style="{ border: `1px solid ${getColor(v.type)}` }">
                            {{ v.text }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="see-wapper-bottom">
            <div class="see-wapper-bottom-left">
                <Title title="风速"></Title>
                <div class="see-wapper-bottom-left-box">
                    <chart :option="leftBottomChart"></chart>
                </div>
            </div>
            <div class="see-wapper-bottom-center">
                <div class="see-wapper-bottom-center-right">
                    <Title title="光照度"></Title>
                    <div class="see-wapper-bottom-center-right-box">
                        <chart :option="centerBottomChart2"></chart>
                    </div>
                </div>
                <div class="see-wapper-bottom-center-left">
                    <Title title="降雨量"></Title>
                    <div class="see-wapper-bottom-center-left-box">
                        <chart :option="centerBottomChart"></chart>
                        <div class="see-wapper-bottom-center-left-box-tip">
                            <div class="see-wapper-bottom-center-left-box-tip-item1">月最佳频次</div>
                            <div class="see-wapper-bottom-center-left-box-tip-item2">月最低频次</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="see-wapper-bottom-right">
                <Title title="月温度统计"></Title>
                <div class="see-wapper-bottom-right-box">
                    <chart :option="rightBottomChart"></chart>
                </div>
            </div>
        </div>
        <div class="see-wapper-table">
            <cusTable :data="state.tabelData"></cusTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import Title from './components/common/title.vue'
import { leftTopChart, centerTop, leftBottomChart, centerBottomChart, centerBottomChart2, rightBottomChart } from './see'
import chart from '@/components/echarts-box.vue'
import { reactive } from 'vue'
import cusTable from '@/components/cusTable.vue'
const state = reactive({
    leftTop: [
        { label: '氮气', num: '8' },
        { label: '氧气', num: '6' },
        { label: '二氧化碳', num: '4' },
        { label: 'PM2.5', num: '3' },
    ],
    rightTop: [
        { label: '10%-20%', text: '红色湿度', type: 1 },
        { label: '20%-30%', text: '绿色湿度', type: 2 },
        { label: '30%-40%', text: '绿色湿度', type: 2 },
        { label: '40%-50%', text: '黄色湿度', type: 3 },
        { label: '50%-60%', text: '黄色湿度', type: 3 },
        { label: '60%-70%', text: '黄色湿度', type: 3 },
        { label: '70%-80%', text: '绿色湿度', type: 2 },
        { label: '80%-90%', text: '绿色湿度', type: 2 },
        { label: '90%-100%', text: '黄色湿度', type: 3 },
    ],
    tabelData: [
        { A: '水稻', B: '水稻土', C: "1098", D: "22", E: 12, F: 103, G: -0.73, H: 329, I: 11.25, J: 2711, K: '2022-05-25' },
        { A: '大豆', B: '盐碱土', C: "1465", D: "359", E: 29, F: 92, G: 0.12, H: 373, I: 11.24, J: 2830, K: '2018-07-01' },
        { A: '玉米', B: '黑土', C: "1149", D: "56", E: 28, F: 120, G: -0.24, H: 383, I: 10.25, J: 2430, K: '2019-02-22' },
        { A: '小麦', B: '水稻土', C: "1288", D: "74", E: 26, F: 105, G: -0.69, H: 129, I: 10.05, J: 2456, K: '2020-11-07' },
        { A: '红薯', B: '黑土', C: "1274", D: "12", E: 15, F: 56, G: -0.23, H: 432, I: 14.25, J: 2126, K: '2021-01-25' },
        { A: '萝卜', B: '黑土', C: "1384", D: "54", E: 16, F: 15, G: 0.5, H: 312, I: 12.15, J: 2097, K: '2021-05-05' },
        { A: '白菜', B: '盐碱土', C: "1102", D: "33", E: 21, F: 44, G: 0.44, H: 345, I: 12.21, J: 2671, K: '2020-04-07' },
        { A: '葡萄', B: '盐碱土', C: "1246", D: "16", E: 28, F: 123, G: -0.29, H: 366, I: 14.35, J: 2655, K: '2018-03-15' },
        { A: '水晶草', B: '盐碱土', C: "1306", D: "92", E: 29, F: 83, G: -0.13, H: 312, I: 11.05, J: 2813, K: '2019-05-21' },
        { A: '大麦', B: '水稻土', C: "1098", D: "262", E: 33, F: 43, G: -0.73, H: 341, I: 11.25, J: 2721, K: '2022-06-25' },

    ]

})
const getColor = (v) => {
    switch (v) {
        case 1:
            return `rgba(255, 28, 73,0.5)`
        case 2:
            return 'rgba(82, 255, 102,0.5)'
        case 3:
            return 'rgba(226, 255, 59,0.5)'
    }
}
</script>
<style lang="less" scoped>
.see-wapper {
    width: 100%;
    height: 120%;
    padding: 20px;
    display: flex;
    overflow: auto;
    flex-direction: column;

    &-top {
        // height: 500px;
        display: flex;

        &-left,
        &-center,
        &-right {
            display: flex;
            flex-direction: column;

            &-box {
                flex: 1;
                background: url(@/images/border.png) no-repeat;
                background-size: 100% 100%;
                padding: 18px 28px;
                margin-top: 16px;
                flex: 1;
                display: flex;
                flex-direction: column;
            }
        }

        &-left {
            width: 340px;

            &-box {

                &-chart {
                    width: 284px;
                    height: 350px;
                }

                &-list {
                    width: 100%;
                    flex: 1;

                    &-item {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        &-left {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            width: 100px;
                        }

                        &-right {
                            flex: 1;
                            height: 16px;
                            background: #243c62;

                            &-progress {
                                height: 100%;
                                background: linear-gradient(to right, #326bf2, #41fcc5);
                            }
                        }
                    }
                }
            }
        }

        &-center {
            flex: 1;
            margin: 0 16px;
        }

        &-right {
            width: 340px;
            display: flex;
            flex-direction: column;

            &-box {
                margin-top: 16px;
                flex: 1;
                display: flex;
                flex-direction: column;
                background-size: 100% 100%;
                justify-content: space-between;

                &-item {
                    margin: 0px;
                    display: flex;
                    justify-content: space-between;
                    padding: 0px 24px;
                    height: 48px;
                    background: #05254c;
                    margin-top: 4px;
                    align-items: center;
                    position: relative;

                    &::before {
                        content: '';
                        width: 5px;
                        height: 100%;
                        background: #8adaff;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }

                    &-left {
                        font-size: 14px;
                    }

                    &-right {
                        padding: 2px 4px;
                        font-size: 12px;
                    }
                }
            }
        }

    }

    &-bottom {
        margin: 16px 0;
        display: flex;
        height: 300px;

        &-left,
        &-right {
            height: 100%;
            width: 340px;
            display: flex;
            flex-direction: column;

            &-box {
                margin-top: 16px;
                flex: 1;
                background: url(@/images/border.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        &-center {
            flex: 1;
            margin: 0 16px;
            display: flex;

            &-left,
            &-right {
                flex: 1;
                display: flex;
                flex-direction: column;

                &-box {
                    margin-top: 16px;
                    flex: 1;
                    position: relative;
                    background: url(@/images/border.png) no-repeat;

                    background-size: 100% 100%;

                    &-tip {
                        position: absolute;
                        right: 20px;
                        top: 50%;

                        &-item1,
                        &-item2 {
                            font-size: 16px;
                            font-family: Adobe Heiti Std;
                            font-weight: normal;
                            color: #96A8B7;
                        }

                        &-item1 {
                            position: relative;
                            top: -50px;

                            &::before {
                                content: '';
                                display: block;
                                position: absolute;
                                left: -420px;
                                top: 10px;
                                width: 400px;
                                height: 0px;
                                border-top: 1px dashed #96A8B7;
                            }
                        }

                        &-item2 {
                            position: relative;
                            top: 30px;

                            &::before {
                                content: '';
                                display: block;
                                position: absolute;
                                left: -420px;
                                top: 10px;
                                width: 400px;
                                height: 0px;
                                border-top: 1px dashed #96A8B7;
                            }
                        }
                    }
                }
            }
        }
    }

    &-table {
        flex: 1;
        overflow: hidden;
    }

}
</style>